<template>
  <div>
    <h2>评论({{list?.total || 0}})</h2>
    <el-table
      :data="list.data"
      style="width: 100%; height: 450px; margin-top: 20px;">
      <el-table-column
        prop="typeName"
        label="留言">
      </el-table-column>
       <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pag"
      layout="prev, pager, next"
      @current-change="currentChange"
      :total="list?.total || 0">
    </el-pagination>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'
import { findComment } from '../../plugins/request'
export default {
    setup() {
      onMounted(() => {
        getList()
      })
      const state = reactive({
        page: 1,
        pageSize: 10,
        list: {
        }
      })
      const getList = async () =>  {
        let params = {
          page: state.page,
          size: state.size
        }
        let { data } = await findComment(params)
        state.list = data.data
      }
      const handleEdit = (val) => {
        
      }
      const handleDelete =  (val) => {
        
      }
      const currentChange = (val) => {
        state.page = val
        getList()
      }
      return {
        ...toRefs(state),
        handleEdit,
        handleDelete,
        currentChange,
      }
    }
}
</script>

<style lang="scss" scoped>
  .addIcon{
    display: block;
    line-height: 49px;
    float: right;
    cursor: pointer;
    font-size: 30px;
  }
  .pag{
    text-align: center;
  }
</style>